<template>
  <div>
    <a-input-search
      v-model="userName"
      placeholder="请选择"
      allow-clear
      @clear.stop="handerClear"
      @search="select"
    />
    <userModal
      v-model:visible="visible"
      :user="user"
      :width="'1000'"
      :title="props.title"
      @handle-ok="handleOk"
    />
  </div>
</template>

<!--新script-->
<script lang="ts" setup>
  import { ref } from 'vue';
  import userModal from '@/common/components/userAndDept/userModal.vue';

  const props = defineProps({
    value: {
      type: String,
      default: '',
    },
    title: {
      type: String,
      default: '',
    },
  });
  const emit = defineEmits(['update:value', 'handerClear']);
  const visible = ref(false);
  const user = ref({
    userId: '',
    userName: '',
  });
  const userName = ref('');
  const select = () => {
    visible.value = true;
  };
  const handleOk = (val: any) => {
    userName.value = val.value.userName;
    emit('update:value', val.userId);
    console.log(val, 'user');
  };
  const handerClear = () => {
    emit('handerClear');
  };
</script>

<style lang="less" scoped>
  .base-component {
    color: red;
  }
</style>
